<template>
	<view class="pageBox">
		<view class="content">
			<view class="list">
				<!-- <view class="item">
					<view class="title">
						<text class="right">手机号</text>
					</view>
					<input type="number" v-model="param.phone" placeholder="请输入手机号" class="inp" maxlength="11" placeholder-style="color:#B3B3B3" />
				</view> -->
				<view class="item">
					<view class="title" style="display: block;">
						<text class="right">身份证照片</text>
						<view class="imgBox">
							<view class="up" @click="uploadImg('idCardFront')">
								<image src="../../static/img/shenfenzhengzhengmian@2x.png" mode="" v-if="param.idCardFront == null  || param.idCardFront == ''"></image>
								<image :src="param.idCardFront" mode="aspectFill" v-else></image>
								<view class="txt">人体面</view>
							</view>
							<view class="up" @click="uploadImg('idCardReverse')">
								<image src="../../static/img/shenfenzhengfanmian@2x.png" mode="" v-if="param.idCardReverse == null  || param.idCardReverse == ''"></image>
								<image :src="param.idCardReverse" mode="aspectFill" v-else></image>
								<view class="txt">国徽面</view>
							</view>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="title">
						<text class="right">收款人姓名</text>
					</view>
					<input type="text" v-model="param.realName" placeholder="请输入真实姓名" class="inp" placeholder-style="color:#B3B3B3" />
				</view>
				<view class="item">
					<view class="title">
						<text class="right">收款人身份证号</text>
					</view>
					<input type="idcard" v-model="param.idCardNo" placeholder="请输入收款人身份证号" class="inp" placeholder-style="color:#B3B3B3" />
				</view>
				<view class="item" style="position: relative;" @click="demo()">
					<view class="title">
						<text class="right">开户银行</text>
					</view>
					<input type="text" v-model="param.bankName" :disabled="true" class="inp" placeholder-style="color:#B3B3B3" />
					<!-- <u-picker mode="selector" v-model="showPicker"  :default-selector="[0]" :range="piackList"></u-picker> -->
					<u-select v-model="showPicker" :list="piackList"  @confirm="confirm" confirm-color="#FE5900"></u-select>
					<view class="iconfont icon-fanhui left"></view>
				</view>

				<view class="item">
					<view class="title">
						<text class="right">开户地址</text>
					</view>
					<input type="text" v-model="param.bankAddress" placeholder="请输入开户地址" class="inp" placeholder-style="color:#B3B3B3" />
				</view>
				<view class="item">
					<view class="title">
						<text class="right">银行卡号</text>
					</view>
					<input type="number" v-model="param.bankNo" placeholder="请输入银行卡号" class="inp" placeholder-style="color:#B3B3B3" />
				</view>
				<view class="item">
					<view class="title">
						<text class="right2">手机号码：{{phone}}</text>
					</view>
					<input type="number" v-model="param.code" placeholder="请输入验证码" class="inp" placeholder-style="color:#B3B3B3" />
					<view @click="showtime" v-if="runTime" class="codeBtn">获取验证码</view>
					<button type="default" size="mini" style="timer" :disabled="true" v-else class="codeBtn">{{ time }}s</button>
				</view>
			</view>

			<button type="default" class="summitBtn" @click="submit">确定</button>
		</view>
	</view>
</template>

<script>
	import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
	import bankpicker from '@/components/my-picker/Picker.vue';
	import {
		userAuth,
		sendPhoneCode,
		sendUserCode,
		upLoadImg
	} from '@/api/user/pwd.js';
	import config from '@/config/index.js';
	import{getBankList,toAuthInfo,getAuthInfo} from '../../api/user/index'
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/imgTool.js';
	export default {
		componentName: ['pickerAddress', 'bankpicker'],

		components: {
			pickerAddress,
			bankpicker
		},
		data() {
			return {
				runTime: true,
				showPicker:false,
				time: 60,
				param: {
					realName: '',
					// phone: '',
					code: '',
					idCardNo: '', //身份证号
					bankName: '请选择开户银行',
					bankNo: '', //银行卡号
					bankAddress: '', //开户地址
					idCardFront: '', //正面
					idCardReverse: '' ,//背面
					flie1:null,
					flie2:null,
					uId:"",
					phone:'',
					auth:{}
				},
				piackList: []
			}
		},
		onLoad(option) {
			this.uId = option.uId
			this.phone = option.phone
			this.getBanklist()
			this.getAuthInfoFuc()
		},
		methods: {
			getAuthInfoFuc(){
				getAuthInfo().then(res=>{
					this.auth = res.data.obj.auth
					this.param.bankName =this.auth.bankName
					this.param.bankAddress =this.auth.bankAddress
					this.param.bankNo =this.auth.bankNo
					this.param.realName=this.auth.realName
					this.param.idCardNo=this.auth.idCardNo
					this.param.idCardFront=this.auth.idCardFront
					this.param.idCardReverse=this.auth.idCardReverse
				})
			},
			getBanklist(){
				getBankList().then(res=>{
					for(var i = 0;i<res.data.obj.length;i++){
						var list = {}
						list.value = res.data.obj[i].id
						list.label = res.data.obj[i].name
						this.piackList.push(list)
					}
					console.log(this.piackList)
				}).catch(err=>{
					
				})
			},
		submit() {
				if(!this.param.realName){
					uni.showToast({
						title:'请输入收款人姓名',
						icon:'none'
					})
					return
				}
				if(!this.param.idCardNo){
					uni.showToast({
						title:'请输入收款人身份证号码',
						icon:'none'
					})
					return
				}
				if(this.param.bankName == '请选择开户银行'){
					uni.showToast({
						title:'请选择开户银行',
						icon:'none'
					})
					return
				}
				if(!this.param.bankAddress){
					uni.showToast({
						title:'请输入开户地址',
						icon:'none'
					})
					return
				}
				if(!this.param.bankNo){
					uni.showToast({
						title:'请输入银行卡号',
						icon:'none'
					})
					return
				}
				if(!this.param.code){
					uni.showToast({
						title:'请输入验证码',
						icon:'none'
					})
					return
				}
				// var myform = {};
				// myform.code = this.param.code
				// myform.bankName =this.param.bankName
				// myform.bankAddress =this.param.bankAddress
				// myform.bankNo =this.param.bankNo
				// myform.realName=this.param.realName
				// myform.idCardNo=this.param.idCardNo
				// myform.idCardFront=this.param.flie1?this.param.flie1:this.param.idCardFront
				// myform.idCardReverse=this.param.flie2?this.param.flie2:this.param.idCardReverse
				// console.log(myform)
				let list = [{
						name: 'idCardFront',
						uri: this.param.idCardFront
					},
					{
						name: 'idCardReverse',
						uri: this.param.idCardReverse
					}
				]
				console.log(list)
				let token = uni.getStorageSync('token')
				var that = this
				uni.showLoading({
					title:'提交中...'
				})
				uni.uploadFile({
				     url: config.apiServer + '/front/user/userAuth',
					 files:list,
				     header:{
				      'token':token
				     },
				     formData:{
						 "code":that.param.code,
						 "bankName":that.param.bankName,
						 "bankAddress":that.param.bankAddress,
						 "bankNo":that.param.bankNo,
						 "realName":that.param.realName,
						 "idCardNo":that.param.idCardNo,
					 },
				     success: (uploadFileRes) => {
						 console.log(9999)
						 uni.hideLoading()
						 let data = JSON.parse(uploadFileRes.data)
				      if(data.code=0){
						  uni.showToast({
						  	title:'提交成功',
						  	icon:'none'
						  })
					  }else{
						  uni.showToast({
						  	title:data.msg,
						  	icon:'none'
						  })
					  }
				     },
				     fail(err){
						  uni.hideLoading()
				          uni.showToast({
				          	title:"网络错误",
							icon:'none'
				          })
				     }
				    });
			},
			demo() {
				this.showPicker = true
			},
			showtime() {
				var count = 60;
				var that = this;
				that.runTime = false;
				var demo = setInterval(function() {
					if (count > 0) {
						count--;
						that.time = count;
					} else {
						clearInterval(this)
						that.time = 60;
						that.runTime = true;
					}
				}, 1000)
				that.sendCode();
			},
			async sendCode() {
				try {
					const ret = await sendUserCode({
						userId: this.uId
					})
					uni.showToast({
						title: '发送短信成功',
						icon:'none'
					})
				} catch (error) {
					console.log(123)
					this.runTime = true;
					this.time = 60;
				}
			},
			confirm(picked) {
				console.log(picked)
				this.param.bankName = picked[0].label
			},
			uploadImg(type) {
				if(type == 'idCardFront'){
					uni.chooseImage({
						count: 1,
						sizeType: ['compressed'], 
						sourceType: ['album', 'camera'],
						success: (res) => {
							this.param.idCardFront = res.tempFilePaths[0]
							// this.param.flie1 = res.tempFiles[0]
							console.log(res)
							
						},
						fail: (err) => {
					
						}
					})
				}else if(type == 'idCardReverse'){
					uni.chooseImage({
						count: 1,
						sizeType: ['compressed'], 
						sourceType: ['album', 'camera'],
						success: (res) => {
							this.param.idCardReverse = res.tempFilePaths[0]	
							// this.param.flie2 = res.tempFiles[0]
						},
						fail: (err) => {
					
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	@import './index.scss';
</style>
